import { useEffect } from 'react';
import { unhappyTotal } from '../../../../../services';
import styles from './index.module.less';

//支付的信息
export default ({ payOrderCount, setPayOrderCount }) => {

	useEffect(() => {
		// 定时器变量
		let timer;
		if (payOrderCount) {
			// 轮询函数
			const startPolling = () => {
				getPaymentStatisticsLoop().finally(() => {
					// 安排下一次轮询
					timer = setTimeout(startPolling, 5000);
				});
			};
			startPolling();
		}
		// 清理函数
		return () => {
			// 清除定时器
			clearTimeout(timer);
		};
	}, [payOrderCount]);


	//获取5秒内产生的新数据
	const getPaymentStatisticsLoop = async () => {
		const { success, data = 0 } = await unhappyTotal();
		if (success) {
			setPayOrderCount(data);
		}
	};

	if (payOrderCount) {
		return (
			<div className='common-color9' style={{ marginRight: '36px' }}>剩余支付中订单：{payOrderCount}<span className={styles.donut}></span></div>
		)
	}

	return (
		null
	)
}